<template>
	<view class="container">
		<view class="top-nav">
			<view @click="backBtn">返回</view>
			<view>新闻详情</view>
			<view></view>
		</view>
		<!-- 新闻标题 -->
		<view class="notice-nav">
			<view class="notice-title">
				{{item.title}}
			</view>
			<view class="notice-title-info">
				发布人：{{item.publicPerson}} 发布时间： {{item.createTime}}
			</view>
		</view>
		<view class="rich-content">
			<rich-text :nodes="item.contentMessage"></rich-text>
		</view>
	</view>
</template>

<script>
	var _this;
	import {detail} from '@/api/tab1'
	// import hansTabber from '@/components/hans-tabbar/hans-tabbar'
	export default {

		data() {
			return {
				item: {},
			}
		},
		
		async onLoad(option) {
			const {id} = option;
			this.item = (await detail({id})).result;
		},

		methods: {
			backBtn() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.container {
		/* background-color: #ccc; */
		padding-bottom: 50rpx;
		padding-top: 100rpx;
	}

	.top-nav {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		/* width: 90%; */
		margin: 0 auto;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 5%;
		z-index: 1000;
	}

	/* .top-nav {
		width: 100%;
		height: 20rpx;
		background-color: #ccc;
		text-align: center;
		line-height: 200rpx;
	} */

	.notice-nav {
		/* height: 300rpx; */
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 15rpx;
	}

	.notice-title-info {
		text-align: center;
		font-size: 25rpx;
		color: #ccc;
	}

	.notice-title {
		text-align: center;
		font-size: 30rpx;
		/* margin: 30rpx 0 0 30rpx; */
	}

	.rich-content {
		width: 90%;
		margin: auto;
		/* height: 300rpx; */
		border-radius: 20rpx;
		/* margin-bottom: 30rpx; */
		background-color: #fff;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		padding: 20rpx;
	}

	.notice-info {
		display: flex;
		justify-content: flex-start;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: #ccc 1rpx solid;
	}

	.notice-img {
		width: 120rpx;
		height: 120rpx;
		background-color: #baf;
		margin-right: 30rpx;
	}

	.notice-content {
		width: 500rpx;
		overflow: hidden;
		font-size: 30rpx;
		text-overflow: ellipsis;
		/* height: 240rpx; */
		/* margin-right: 40rpx; */
		/* text-align: center; */
	}

	.notice-nav {
		/* height: 300rpx; */
		width: 88%;
		margin: 0 auto;
		border: 1rpx #706d6c;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.notice-title {
		font-size: 30rpx;
		/* margin: 30rpx 0 0 30rpx; */
	}

	.notice-info {
		display: flex;
		justify-content: flex-start;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: #ccc 1rpx dashed;
	}

	.notice-info1 {
		border-bottom: none;
	}
</style>
